<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="24">
        <!-- 第一行 finger -->
        <el-row
          type="flex"
          justify="center"
          style="border-bottom: 1px solid grey"
        >
          <span>
            <img src="../../assets/frontdesk/images/finger.png" alt="" />
          </span>
        </el-row>
        <!-- 第2行 newscategorytitle -->
        <el-row type="flex" justify="center">
          <h3>
            <a :href="'/#/NewsCategory/' + newsCategory.id">{{
              newsCategory.name
            }}</a>
          </h3>
        </el-row>

        <!-- 第3行 newscategoryitem,每个新闻分类有6个 -->
        <el-row :gutter="40" justify="center" class="newscategoryitem">
          <el-col :span="8" v-for="item in news" :key="item.id">
            <a :href="'/#/News/' + item.id">
              <img :src="baseImgURL + '/' + item.titlePic" />
              <h2 ref="newsTitle">{{ item.title }}</h2>
              <p ref="newsDescribe">{{ item.describe }}</p>
              <span>{{ item.createTime.slice(0,10) }}</span>
              <span style="float: right"
                >{{ item.appUserName }}&nbsp;&nbsp;&nbsp;</span
              >
            </a>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
* {
  margin: 0%;
  padding: 0%;
}
a {
  text-decoration: none;
  color: #000;
}
.newscategoryitem {
  padding-top: 1%;
}
.newscategoryitem a {
  display: inline-block;
  width: 100%;
  margin-bottom: 5%;
}
.newscategoryitem a > h2:hover {
  color: rgb(191, 64, 56);
}
.newscategoryitem a > img {
  width: 100%;
  height: 164.5px;
  margin-bottom: 2%;
}
.newscategoryitem a > h2 {
  font-size: large;
  margin-bottom: 1%;
}
.newscategoryitem a > p {
  font-size: medium;
  margin-bottom: 1%;
  height: 3em;
}
</style>

<script>
export default {
  props: {
    newsCategory: {
      //   type:Object,//此处拿不到从父亲组件传过来的object对象，在控制台会报错，但数据实际已经正常渲染
      type:Object,
      required: true,
      //   default:function() {
      //       return {id:"0000",name:"分类一"}
      //   }
    },
    news: {
      type:Array,
      required: true,
    },
  },
  data() {
    return {
      baseImgURL: "http://121.196.246.105:4000/News/TitlePic/",
      newsCategoryId: "",
      newsCategoryName: "",
    };
  },
  updated() {
    //   console.log(this.$refs.newsTitle);
      this.formatTitle(this.$refs.newsTitle, 13);
    //   console.log(this.$refs.newsDescribe);
      this.formatDescribe(this.$refs.newsDescribe, 35);
  },
  methods: {
    //   格式化Title
    formatTitle(dataArray, length) {
      for (var i = 0; i < dataArray.length; i++) {
        //   console.log('1');
        if (dataArray[i].innerText.length > length) {
          dataArray[i].innerText =
            dataArray[i].innerText.slice(0, length) + "...";
        }
      }
    },
    //   格式化Describe
    formatDescribe(dataArray, length) {
      for (var i = 0; i < dataArray.length; i++) {
        //   console.log('1');
        if (dataArray[i].innerText.length > length) {
          dataArray[i].innerText =
            dataArray[i].innerText.slice(0, length) + "...";
        } 
        // else 
        // {
        //   var fixedStr = "";
        //   const count = length - dataArray[i].innerText.length;
        //   //   console.log(count);
        //   for (var i = 0; i < count; i++) {
        //     fixedStr += "*";
        //   }
        //   console.log(fixedStr);
        //   let data= dataArray[i].innerText;
        //   console.log(data);
        // //   console.log(dataArray[i].innerText);
        // }
      }
    },
  },
  beforeUpdate() {
    //   console.log(this.newsCategory);
    //   this.newsCategoryId=this.newsCategory.id;
    //   console.log(this.newsCategoryId);
    //   this.newsCategoryName=this.newsCategory.name;
  },
};
</script>